<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <div style="color: tomato;font-size:39px ;">欢迎来到蜗牛学苑！</div>
        <!-- fontSize 这个对象形式的属性，只有这个才生效 -->
        <div :style="{color: colorvalue,fontSize: sizevalue + 'px'}">动态绑定内联样式！</div>
        <!-- 数组形式绑定内联样式 -->
        <div :style="[colorarr,sizearr]">动态绑定内联样式！</div>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            //data指的是model
            data() {
                return {
                    colorvalue: 'red',
                    sizevalue: 39,
                    colorarr:{
                        color: 'tomato'
                    },
                    sizearr:{
                        fontSize:'39px'
                    },
                }
            }
        });
    </script>
</body>

</html>